import ReactDOM from "react-dom";
import React, { Component } from "react";
import PropTypes from 'prop-types'


const List = (props) => {
  // 预期是数组
  const arr = props.colors
  const lis = arr.map(item => <li key={item.id}>{item.name}</li>)
  return <ul>{lis}</ul>
}


// props 校验步骤
// 1 使用组件.propTypes = {} 定义校验规则
// 2 安装导入 prop-types 的包，提供校验方式的
// 3 在 组件.propTypes = {} 对象中，规则：propsName:rules 
List.propTypes = {
  colors: PropTypes.array
}


class App extends Component {
  render() {
    return (
      <div className="app">
        <List colors={[]} />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));
